<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

window._AMapSecurityConfig = {
  securityJsCode: '681dd0b2eea709ed604d6d63fa3d3f6c' // '「申请的安全密钥」',
}
import bus from '@/eventBus/eventBus.js'
import {getLnt} from "@/api/lot";

export default {
  name: "map-view",
  data() {
    return {
      getTime: 3,
      timer: "",
      map: null,
      autoOptions: {
        input: ''
      },
      placeSearch: null,
      auto: null,
      searchPlaceInput: '',
      driving: null,
      lotId: '',
      userId:''
    }
  },
  created() {
    bus.$on('share_id', val => {
      this.autoOptions.input = val
    }),
      bus.$on('share', val => {
        this.searchPlaceInput = val
      })
  },
  mounted() {
    this.initAMap();
  },
  watch: {
    searchPlaceInput(newValue) {
      if (newValue != null) {
        this.placeSearch.search(newValue)
      }
    }
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "be6998e3ef8f15add6d080ed3e422265", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale',
          'AMap.ToolBar',
          'AMap.HawkEye',
          'AMap.MapType',
          'AMap.Geolocation',
          'AMap.AutoComplete',
          'AMap.PlaceSearch',
          'AMap.Driving'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });
          this.map.addControl(new AMap.Scale())
          this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.HawkEye())
          this.map.addControl(new AMap.MapType())
          this.map.addControl(new AMap.Geolocation())
          this.auto = new AMap.AutoComplete(this.autoOptions)
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map
          }) //构造地点查询类
          this.auto.on('select', this.select)
          this.driving = new AMap.Driving({
            map: this.map,
          })
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //点击查询方法
    select(e) {
      console.log(e)
      this.placeSearch.setCity(e.poi.adcode)
      this.placeSearch.search(e.poi.name) //关键字查询查询


      //先拿到搜索地址的经纬度
      var lat = e.poi.location.lat//
      var lng = e.poi.location.lng
      console.log("纬度：" + lat)
      console.log("经度：" + lng)

      //开始发送axios请求 请求后端  计算出最近的那个停车场
      getLnt(lng, lat).then(res => {
        if (res.code === 20000) {
          console.log(res.data)
          this.lotId=res.data.id
          this.userId=res.data.userId
          //暂时地跳转页面
          this.$router.push({path:"/addorder/addorder",query:{lotId:this.lotId,userId:this.userId}})
          // this.carDriving(lat,lng,res.data.longitude,res.data.latitude)
        }
      })
      //先不要调用这个画路线的接口了，因为他是有免费次数的
      // this.carDriving(lng,lat，)

    },
    //绘制地图方法
    carDriving(startLongitude, startLatitude, endLongitude, endLatitude) {

      var startLngLat = new AMap.LngLat(startLongitude, startLatitude);
      var endLngLat = new AMap.LngLat(endLongitude, endLatitude);
      this.driving.search(startLngLat, endLngLat, (status, result) => {
        if (status === "complete") {
          this.map.setFitView();
          setTimeout(function () {
            this.$confirm('检测到您确定好停车地点，是否提前预定停车位？', '确认信息', {
              distinguishCancelAndClose: true,
              confirmButtonText: '确定',
              cancelButtonText: '取消'
            })
              .then(() => {
                this.$router.push("/addorder/addorder")
              })

          }, 2000);

        }
      })
    },
  }
};
</script>
<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 670px;
}
</style>
